<html>
	<head>
    	<META   http-equiv="Content-Type" content="text/html; charset=utf-8"        />
   		<link   rel="stylesheet"    type="text/css"   href="../../css/styles.css"      />

		<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
		<script type="text/javascript" src="../../logic/js/filterCandidates.js"></script>
	</head>

	<body >
			<!-- MENU --> 
			<div id="nav">
				<ul>	
					<li class="opensans"><a href="">Filtrar</a></li>
					<li class="opensans"><a href="">Stand</a></li>
				</ul>
			</div>

			<!-- CONTENIDO -->
			<div class="wrapper" align="center">
				<div id="content" class="box">
					<div id= "container">
						<section class="ac-container">
							<div id="stateSection">
								<input id="ac-1" name="accordion-1" type="radio" />
								<label for="ac-1">Filtrar</label>
								<article class="ac-medium">
									<br>
									<div id="inner" style="overflow:hidden; width: 100%">
										<div style="float: left; width:1%">&nbsp;</div>
									    <div class="leftSide" style="float: left; width:13%">
									    	<div style="text-align: left">Provincia</div>
											<select id="lugar_de_residencia_provincia" name="lugar_de_residencia_provincia" style="float: left; width:100%">
								                <script>
								                    fillStates($('#lugar_de_residencia_provincia'));
								                </script>
								            </select>
								        </div>
								        <div style="float: left; width:1%">&nbsp;</div>
								        <div class="leftSide" style="float: left; width:13%">
								        	<div style="text-align: left">Edad</div>
											<select id="edad" name="edad" style="float: right; width: 100%">
								                <script>
								                    fillAges($('#edad'));
								                </script>
								            </select>
								        </div>
								        <div style="float: left; width:1%">&nbsp;</div>
								        <div class="leftSide" style="float: left; width:13%">
								        	<div style="text-align: left">Universidad</div>
											<select id="institucion" name="institucion" style="float: right; width: 100%">
								                <script>
								                    fillUniversities($('#institucion'));
								                </script>
								            </select>
								        </div>
								        <div style="float: left; width:1%">&nbsp;</div>
								        <div class="leftSide" style="float: left; width:13%">
								        	<div style="text-align: left">Carrera</div>
											<select id="carrera_area" name="carrera_area" style="float: right; width:100%">
								                <script>
								                    fillDegrees($('#carrera_area'));
								                </script>
							                </select>
								        </div>
								        <div style="float: left; width:1%">&nbsp;</div>
								        <div class="leftSide" style="float: left; width:13%">
								        	<div style="text-align: left">Estado de carrera</div>
											<select id="estado_carrera" name="estado_carrera" style="float: right; width:100%">
								                <option value="0" selected="">  Indistinto    </option>
								                <option value="Completo">       Completa      </option>
								                <option value="Avanzado">       Avanzada      </option>
								                <option value="En curso">       En curso      </option>
								                <option value="Interrumpido">   Interrumpida  </option>
							              	</select>
								        </div>
								        <div style="float: left; width:1%">&nbsp;</div>
								        <div class="leftSide" style="float: left; width:13%">
								        	<div style="text-align: left">Experiencia laboral</div>
											<select id="experiencia" name="experiencia" style="float: right; width:100%">
								                <option value="0" selected="">  Indistinto    </option>
								                <option value="Si">       			Si        </option>
								                <option value="No">       			No        </option>
							              	</select>
								        </div>
								        <div style="float: left; width:1%">&nbsp;</div>
								        <div class="leftSide" style="float: left; width:13%">
								        	<div style="text-align: left">Experiencia en</div>
											<select id="trabajo_area" name="trabajo_area" style="float: right; width:100%">
								                <script>
								                    fillAreaType($('#trabajo_area'));
								                </script>
							              	</select>
								        </div>
							        </div>
							        <br><br>

									<div id="inner" style="overflow:hidden; width: 100%">
										<div style="float: left; width:1%">&nbsp;</div>
									    <div class="leftSide" style="float: left; width:13%">
									    	<div style="text-align: left">Titulo</div>
											<div>
												<input id="title" name="title" style="float: right; width:100%">
											</div>
								        </div>

								        <div style="float: left; width:1%">&nbsp;</div>
								        <div class="leftSide" style="float: left; width:13%">
								        	<div style="text-align: left">Edad</div>
											<select id="edad" name="edad" style="float: right; width: 100%">
								                <script>
								                    fillAges($('#edad'));
								                </script>
								            </select>
								        </div>
								        <div style="float: left; width:1%">&nbsp;</div>
								        <div class="leftSide" style="float: left; width:13%">
								        	<div style="text-align: left">Universidad</div>
											<select id="institucion" name="institucion" style="float: right; width: 100%">
								                <script>
								                    fillUniversities($('#institucion'));
								                </script>
								            </select>
								        </div>
								        <div style="float: left; width:1%">&nbsp;</div>
								        <div class="leftSide" style="float: left; width:13%">
								        	<div style="text-align: left">Carrera</div>
											<select id="carrera_area" name="carrera_area" style="float: right; width:100%">
								                <script>
								                    fillDegrees($('#carrera_area'));
								                </script>
							                </select>
								        </div>
								        <div style="float: left; width:1%">&nbsp;</div>
								        <div class="leftSide" style="float: left; width:13%">
								        	<div style="text-align: left">Estado de carrera</div>
											<select id="estado_carrera" name="estado_carrera" style="float: right; width:100%">
								                <option value="0" selected="">  Indistinto    </option>
								                <option value="Completo">       Completa      </option>
								                <option value="Avanzado">       Avanzada      </option>
								                <option value="En curso">       En curso      </option>
								                <option value="Interrumpido">   Interrumpida  </option>
							              	</select>
								        </div>
								        <div style="float: left; width:1%">&nbsp;</div>
								        <div class="leftSide" style="float: left; width:13%">
								        	<div style="text-align: left">Experiencia laboral</div>
											<select id="experiencia" name="experiencia" style="float: right; width:100%">
								                <option value="0" selected="">  Indistinto    </option>
								                <option value="Si">       			Si        </option>
								                <option value="No">       			No        </option>
							              	</select>
								        </div>
								        <div style="float: left; width:1%">&nbsp;</div>
								        <div class="leftSide" style="float: left; width:13%">
								        	<div style="text-align: left">Experiencia en</div>
											<select id="trabajo_area" name="trabajo_area" style="float: right; width:100%">
								                <script>
								                    fillAreaType($('#trabajo_area'));
								                </script>
							              	</select>
								        </div>
							        </div>
								</article>
							</div>
						</section>
					</div>
					<div>
						<table border="1" style="width:300px">
							<tr>
							  <td>Jill</td>
							  <td>Smith</td> 
							  <td>50</td>
							</tr>
							<tr>
							  <td>Eve</td>
							  <td>Jackson</td> 
							  <td>94</td>
							</tr>
						</table>
					</div>
					
				</div>
			</div>
			<div class="footer box centered" >
					<p>	Copyright 2014  AArEII    <br>
						Todos los derechos reservados.
			</div>
	</body>
</html>
